<template>
	<view class="myOrderList">
		<view class="tabs">
			<view class="tab_item" v-for="item in tabs" :key="item.val" @click="changeTabs(item)">
				<view class="tab_name" :class="{'tab_name_active':orderType==item.val}">{{item.name}}</view>
				<view class="tab_underline">
					<view class="active" v-if="orderType==item.val"></view>
					<view class="" v-else></view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="order_item" v-for="(item,index) in list" :key="index">
				<view class="order_head">
					<view class="order_shop" @click="onSkip(`/business/pages/business_tab/home?bid=${item.bid}`)">
						<image :src="item.binfo.logo" mode=""></image>
						<view class="shop_name">{{item.binfo.name}}</view>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
					<view class="order_status">{{getStatusType(item.status)}}</view>
				</view>
				<view class="order_goods">
					<view class="" v-if="item.prolist.length<=1"
						@click="onSkip(`/package/mine/myOrderList/myOrderDetails?orderId=${item.id}&ordertype=${item.ordertype}`)">
						<view class="img">
							<image v-if="item.prolist[0].pic" :src="item.prolist[0].pic" mode=""></image>
						</view>
						<view class="goods_info">
							<view class="goods_title">
								{{item.prolist[0].name}}
							</view>
							<view class="goods_label">
								{{item.prolist[0].ggname}}
							</view>
						</view>
					</view>
					<view class="" v-else
						@click="onSkip(`/package/mine/myOrderList/myOrderDetails?orderId=${item.id}&ordertype=${item.ordertype}`)">
						<view class="img" v-for="(img,i) in item.prolist.slice(0,3)" :key="i">
							<image v-if="img.pic" :src="img.pic" mode=""></image>
						</view>
						<view class="goods_total">
							<text>共计{{item.prolist.length}}件商品</text>
							<uni-icons type="forward" size="16" color="#999999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="order_footer">
					<view class="order_total">
						<text>共{{item.prolist.length}}件商品 合计：</text>
						<text class="font_min">¥</text>
						<text class="font_max">{{item.totalprice}}</text>
						<text>(含运费{{item.freight_price}})</text>
					</view>
					<view class="btn" v-if="item.status===0">
						<view class="" @click.stop="onCloseOrder(item.id,item.ordertype)">取消订单</view>
						<view class="red_btn"
							@click.stop="onSkip(`/business/pages/business_tab/orderPay?money=${item.totalprice}&orderId=${item.payorderid}&bid=${item.bid}`)">
							去付款</view>
						<view v-if="item.choujiang_id > 0" @click.stop="onSkip(`/package/mine/circleDraw?id=${item.choujiang_id}&pageType=1&lotteryType=sj`)">
						去抽奖</view>
					</view>
					
					<view class="btn" v-else-if="item.status===1">
						<!-- 暂时删除 -->
						<view v-if="canrefund==1&&item.refundnum<item.procount"
							@click.stop="onSkip(`/package/mine/applyRefund/applyRefund?id=${item.id}&type=${item.ordertype}&totalPrise=${item.totalprice}`)">
							申请退款</view>
						<view v-if="item.freight_type==1" @click.stop="getQrCode(item.hexiao_qr)">核销码</view>
						<view v-if="item.choujiang_id > 0" @click.stop="onSkip(`/package/mine/circleDraw?id=${item.choujiang_id}&pageType=1&lotteryType=sj`)">
						去抽奖</view>
						<!-- <view class="red_btn">提醒发货</view> -->
					</view>
					<view class="btn" v-else-if="item.status===2">
						<view v-if="item.freight_type==1" @click.stop="getQrCode(item.hexiao_qr)">核销码</view>
						<view v-if="item.ordertype==0||item.ordertype==1||item.ordertype==2" 
						 @click="onSkip(`/package/mine/myOrderList/logistics?com=${item.express_com}&no=${item.express_no}&type=null`)">查看物流</view>
						<view v-if="canrefund==1&&item.refundnum<item.procount"
							@click.stop="onSkip(`/package/mine/applyRefund/applyRefund?id=${item.id}&type=${item.ordertype}&totalPrise=${item.totalprice}`)">
							申请退款</view>
						<view class="red_btn" @click.stop="onConfirmReceiptMyOrder(item.id,item.ordertype)">确认收货</view>
						<view v-if="item.choujiang_id > 0" @click.stop="onSkip(`/package/mine/circleDraw?id=${item.choujiang_id}&pageType=1&lotteryType=sj`)">
						去抽奖</view>
					</view>
					<view class="btn" v-else-if="item.status===3">
						<view v-if="item.iscomment==0" @click.stop="onDelMyOrder(item.id,item.ordertype)">删除订单
						</view>
						<view class="red_btn" v-if="item.iscommentdp==0"
							@click.stop="onSkip(`/package/mine/myOrderList/myOrderDetails?orderId=${item.id}&ordertype=${item.ordertype}`)">
							立即评价</view>
						<view v-if="item.choujiang_id > 0" @click.stop="onSkip(`/package/mine/circleDraw?id=${item.choujiang_id}&pageType=1`)">
						去抽奖</view>
					</view>
					<view v-else></view>
				</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
			<view style="height: 50px;"></view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="hintModalBox">
				<image :src="code"></image>
				<view class="subBtn flex-center" @click="heXiaoSuccess">已核销完成</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		myOrder,
		closeMyOrder,
		confirmReceiptMyOrder,
		delMyOrder
	} from "../../api/index.js"
	export default {
		data() {
			return {
				canrefund: null,
				code: '', //核销码
				noMoreData: false,
				pagenum: 1,
				tabs: [{
						name: '全部',
						val: 'all'
					},
					{
						name: '待付款',
						val: 0
					}, {
						name: '待发货',
						val: 1
					}, {
						name: '待收货',
						val: 2
					}, {
						name: '已完成',
						val: 3
					},
				],
				orderType: 'all',
				list: []
			};
		},
		onLoad(opt) {
			this.orderType = opt.type
			// this.onGetmyOrder()
		},
		onShow() {
			this.onRefresh()
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetmyOrder('bottom')
		},
		methods: {
			// 核销完成确认
			async heXiaoSuccess() {
				const result = await new Promise(resolve => {
					uni.showModal({
						title: '提示',
						content: `确认商家已经核销完成?`,
						confirmColor: '#41644A',
						success(msg) {
							resolve(msg)
						}
					});
				})
				if (result.confirm) {
					this.close('popup')
					this.onRefresh()
				}
			},
			getQrCode(img) {
				this.code = img
				this.open('popup')
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			// 删除订单 
			async onDelMyOrder(id, type) {
				const result = await new Promise(resolve => {
					uni.showModal({
						title: '提示',
						content: `确认删除该订单?`,
						confirmColor: '#41644A',
						success(msg) {
							resolve(msg)
						}
					});
				})
				if (result.confirm) {
					const res = await delMyOrder('s=/ApiOrder/delOrder', {
						orderid: id,
						ordertype: type
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						setTimeout(() => {
							this.onRefresh()
						}, 2000)
					}
				}
			},
			// 确认收货
			async onConfirmReceiptMyOrder(id, type) {
				const result = await new Promise(resolve => {
					uni.showModal({
						title: '提示',
						content: `确认该订单已收到货?`,
						confirmColor: '#41644A',
						success(msg) {
							resolve(msg)
						}
					});
				})
				if (result.confirm) {
					const res = await confirmReceiptMyOrder('s=/ApiOrder/orderCollect', {
						orderid: id,
						ordertype: type
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						setTimeout(() => {
							this.onRefresh()
						}, 2000)
					}
				}
			},
			// 订单状态
			getStatusType(status) {
				return status == 0 ? '待支付' : status == 1 ? '待发货' : status == 2 ? '待收货' : status == 3 ? '已完成' : status ==
					4 ? '已关闭' : ''
			},
			// 取消订单
			async onCloseOrder(id, type) {
				const result = await new Promise(resolve => {
					uni.showModal({
						title: '提示',
						content: `确认取消该订单?`,
						confirmColor: '#41644A',
						success(msg) {
							resolve(msg)
						}
					});
				})
				if (result.confirm) {
					const res = await closeMyOrder('s=/ApiOrder/closeOrders', {
						orderid: id,
						ordertype: type
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						setTimeout(() => {
							this.onRefresh()
						}, 2000)
					}
				}
			},
			onRefresh() {
				this.pagenum = 1
				this.onGetmyOrder()
			},

			// 订单信息
			async onGetmyOrder(type) {
				const res = await myOrder('s=/ApiOrder/orderlists', {
					pagenum: this.pagenum,
					st: this.orderType,
					keyword: ''
				})
				
				const {
					status,
					msg,
					data,
				} = res.data
				if (status == 1) {
					console.log(res, "ordres---")
					this.canrefund = data.canrefund
					type == 'bottom' ? this.list.push(...data.datalist) : this.list = data.datalist
					this.pagenum != 1 && data.datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
					console.log(this.list)
				} else {
					this.showToast(msg)
				}
			},

			changeTabs(item) {
				this.orderType = item.val
				this.onRefresh()
			},
			linkTo(item, url) {
				uni.navigateTo({
					url: `/package/mine/${url}/${url}?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.hintModalBox {
		background: #fff;
		width: 60vw;
		height: 400rpx;
		border-radius: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.subBtn {
			background: #41644A;
			margin-top: 40rpx;
			border-radius: 30rpx;
			height: 80rpx;
			width: 100%;
			color: #fff;
		}
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.myOrderList {
		position: relative;
		color: #333333;

		.tabs {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 36upx 30upx 17upx;
			box-sizing: border-box;
			background-color: #fff;

			// position: fixed; //新删掉的
			// top: 0;
			// left: 0;
			// z-index: 99;
			.tab_item {
				.tab_name {
					font-size: 30upx;
					color: #999999;
					line-height: 30upx;
					margin-bottom: 14upx;
				}

				.tab_name_active {
					color: #333333;
				}

				.tab_underline {
					display: flex;
					justify-content: center;

					>view {
						width: 40upx;
						height: 4upx;
						border-radius: 2upx;
					}

					.active {
						background-color: #41644A;
					}
				}
			}
		}

		.list {
			.order_item {
				margin-bottom: 20upx;

				.order_head {
					padding: 26upx 20upx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;

					.order_shop {
						display: flex;
						align-items: center;

						image {
							width: 32upx;
							height: 32upx;
						}

						.shop_name {
							font-size: 26upx;
							margin: 0 22upx;
						}
					}

					.order_status {
						font-size: 26upx;
						color: #E34749;
					}
				}

				.order_goods {
					>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20upx 20upx 28upx;
						box-sizing: border-box;
						background-color: #FAFAFA;

						.img {
							width: 152upx;
							height: 152upx;
							background-color: #fff;
							margin-right: 20upx;
							display: flex;
							align-items: center;

							image {
								width: 152upx;
								height: 152upx;
							}
						}

						.goods_info {
							flex: 1;

							.goods_title {
								font-size: 26upx;
								color: #333333;
								line-height: 45upx;
								margin-bottom: 24upx;
							}

							.goods_label {
								font-size: 22upx;
								color: #AAAAAA;
							}
						}

						.goods_total {
							flex: 1;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							color: #999999;
							font-size: 24upx;
						}
					}

				}

				.order_footer {
					padding: 0 20upx;
					box-sizing: border-box;
					background-color: #fff;

					.order_total {
						font-size: 22upx;
						padding: 30upx 0 28upx;
						border-bottom: 1upx solid #F2F2F2;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;

						.font_min {
							font-size: 20upx;
						}

						.font_max {
							font-size: 28upx;
						}
					}

					.btn {
						padding: 24upx 0 30upx;
						display: flex;
						justify-content: flex-end;

						>view {
							width: 152upx;
							height: 52upx;
							border-radius: 26upx;
							border: 1upx solid #CCCCCC;
							line-height: 52upx;
							text-align: center;
							margin-left: 24upx;
							font-size: 26upx;
						}

						.red_btn {
							background-color: #41644A;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
